<template>
  <div class="wrapper_1200 selectedIndex mb-50px" v-if="computedRecommendedList.length">
    <div class="w-100% text-28px fontColor333 fw-700 text-center mb-30px alimama">精选版块</div>
    <div class="grid-container grid-column-5 gap-15px bg-white p-10px rounded-8px">
      <div v-for="item in computedRecommendedList" :key="item.id" class=" text-center cursor-pointer" @click="handleClick(item)">
        <div class="rounded-8px text-18px py-5px fontColor333 transition hover:bg-#b91c1c hover:text-#fff">
          {{ item.name }}
        </div>
        <div class="text-14px text-#737373 mt-5px">{{ messages[item.id] }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { pcHomeRecommendedApi } from '~/server/homeApi'
const router = useRouter()
const { data: recommendedList } = await useAsyncData(async () => pcHomeRecommendedApi(), {
  default: () => [],
})

const showSortIds = [81,11, 10, 7, 101]

const computedRecommendedList = computed(() => {
  const list = recommendedList.value?.filter((item:any) => showSortIds.includes(item.id));
  // list 按照 showSortIds 的顺序排序
  return list?.sort((a:any, b:any) => showSortIds.indexOf(a.id) - showSortIds.indexOf(b.id))
})

const handleClick = (item:any) => {
  router.push(`/product/product_recommended?id=${item.id}&name=${item.name}`)
  // product/product_recommended?id=11&name=厨房用品
}

const messages = {
  81: '开单首选',
  11: '开单首选',
  101: '超低折扣',
  10: '开单首选',
  7: '开单首选',
}

</script>
<style scoped lang="scss">

</style>
